<template>
	<view class="service-information required-form-Box">
		<navBar title="维修审核"></navBar>
		<view class="headLine">
			{{ titleObj.subTitle }}
		</view>
		<view class="all-text" v-if="dateList.id">
			<view class="service-text">
				<view class="text-ring">{{ getContent(dateList) || '' }}
				</view>
				<view class="leval" :class="{'re':dateList.rankClass === 'tall','ye':dateList.rankClass === 'central', 'bl':dateList.rankClass === 'bottom' || dateList.rankClass === 'nought'}">
					{{ dateList.diseaseGradeName || ''}}{{ dateList.diseaseNo || ''}}
				</view>
			</view>
			<view class="plain">{{ dateList.diseaseStatus || ''}}</view>
			<view class="explain">
				<view class="e-text">截止日期：</view>
				<view class="e-time" :class="getDate(dateList.repairEndDate) < getDate(new Date()) ? 'red' : ''">
					{{ getTime(dateList.repairEndDate || '') }}</view>
			</view>
			<view class="job">工单号：{{ dateList.repairOrderNo || ''}}</view>
			<commonLookImage :imageArr="dateList.imgs" width="80px" height="80px" style="padding-bottom: 40rpx;"></commonLookImage>
			<!-- 视频查看组件 -->
			<view-video v-if="diseaseVideoList.length > 0" class="no-ml" :showTitle="false" :videoList="diseaseVideoList" :playVideoSrc="playVideoSrc" @lookVideo="lookVideo" @closedVideo="closeVideo"></view-video>	
		</view>
		<view class="content-colot"></view>
		<view class="photo-list" v-if="formData.measure">
			<view class="photo-top">
				<view class="photo-text">修复措施</view>
			</view>
			<view style="margin-bottom: 20rpx;">
				{{formData.measure || ''}}
			</view>
		</view>
		<view class="content-colot" v-if="formData.measure"></view>
		<view style="display: flex;align-items: center;justify-content: space-between;padding: 20rpx 40rpx;font-size: 32rpx;">
			<view style="font-weight: 600;">维修日期</view>
			<view>{{ formData.repairDate }}</view>
		</view>
		<view class="content-colot"></view>
		<view class="photo-list">
			<view class="photo-top">
				<view class="photo-text">维修照片</view>
			</view>
			<view class="top_img" v-show="beforeImgsList.length > 0">
				<view style="font-size: 30rpx;padding-bottom: 30rpx;">施工前</view>
				<commonLookImage :imageArr="beforeImgsList" width="80px" height="80px"></commonLookImage>
			</view>
			<view class="top_img" v-show="middleImgsList.length > 0">
				<view style="font-size: 30rpx;padding-bottom: 30rpx;">施工中</view>
				<commonLookImage :imageArr="middleImgsList" width="80px" height="80px"></commonLookImage>
			</view>
			<view class="top_img"  v-show="afterImgsList.length > 0">
				<view style="font-size: 30rpx;padding-bottom: 30rpx;">施工后</view>
				<commonLookImage :imageArr="afterImgsList" width="80px" height="80px"></commonLookImage>
			</view>
			<view class="top_img" v-show="videoList.length > 0">
				<view style="font-size: 30rpx">维修视频</view>
				<view-video  class="no-ml wrap" :showTitle="false" :videoList="videoList" :playVideoSrc="playVideoSrc" @lookVideo="lookVideo" @closedVideo="closeVideo"></view-video>
			</view>
		</view>
		<view class="content-colot"></view>
		<view class="">
			<view class="dis-localtion" v-for="(item,index) in diseaseMaterials" :key="index">
				<text class="lo-text">工程量{{index+1}}</text>
				<view class="lo-menu">
					<view class="menu-fl border-bottom">
						<text>{{ ownerCode==='xm' ? '工程项': '物料描述' }}</text>
						<text>{{item.makt || ''}}</text>
					</view>
					<view class="menu-fl border-bottom">
						<text>{{ ownerCode==='xm' ? '编码': '物料编码' }}</text>
						<text>{{item.code || ''}}</text>
					</view>
					<view class="menu-fl border-bottom">
						<text>工程量</text>
						<text>{{item.workAmount || ''}}{{item.measureUnit || ''}}</text>
					</view>
				</view>
				<view class="content-colot"></view>
			</view>
		</view>
		<view class="photo-list">
			<view class="photo-top">
				<view class="photo-text">工程量确认单</view>
			</view>
			<view class="top_img">
				<commonLookImage :imageArr="sheetImgsList" width="90px" height="90px"></commonLookImage>
			</view>
		</view>
		<view class="content-colot"></view>
		<view class="photo-list">
			<view class="photo-top">
				<view class="photo-text">备注</view>
			</view>
			<view style="margin-bottom: 20rpx;">
				{{formData.remark || ''}}
			</view>
		</view>
		
		<view class="headLine">材料消耗</view>
		<view class="science" v-for="(it, i) in formData.materialList" :key="i">
			<view class="science-top">
				<view class="z-left">{{ it.deviceTypeName }}</view>
				<view class="z-right">{{ it.num }}{{ it.unit }}</view>
			</view>
			<view class="science-bottom">
				<view class="science-bottom-gg">
					<view class="">
						<view class="s-left">规格型号：</view>
					</view>
					<view class="">
						<view class="s-left">{{ it.deviceTypeAttributeName }}</view>
					</view>
				</view>
				<view class="science-bottom-gg">
					<view class="">
						<view class="s-right">消耗量：</view>
					</view>
					<view class="">
						<view class="s-right">{{ it.num }}{{ it.unit }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-colot"></view>
		<view class="technological ">
			<view class="z-technological ">流程</view>
		</view>
		<view class="submit-sh" v-show="formData.workOrderLogs && formData.workOrderLogs.length > 0">
			<view class="" v-for="(it, i) in formData.workOrderLogs" :key="i">
				<view class="after-oper" v-show="it.operationType === '提交'">
					<view class="submit">
						<view class="z-s"></view>
						<view class="z-u">提交</view>
						<view class="s-tm">{{ getDate2(it.operationDate) }}</view>

					</view>
					<view class="s-time">
						<!-- <view class="s-text">提交时间</view> -->
						<view class="z-b">{{ it.operationUserName }}</view>
					</view>
				</view>

				<view class="after-oper" v-show="it.operationType === '审核'">
					<view class="submit">
						<view class="z-s"></view>
						<view class="z-u1">审核</view>
						<view class="s-tm-r">{{ it.reviewState }}</view>
						<view class="s-tm">{{ getDate2(it.operationDate) }}</view>
					</view>
					<view class="s-time">
						<view class="z-b">{{ it.operationUserName }}</view>
					</view>
					<view class="s-time1">
						<view class="s-text1">审核意见：</view>
						<view class="s-tm1">{{ it.operationContent ? it.operationContent : '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button  @click="fail(0)" :disabled="isClick" class="button-warn">不通过</button>
				<button  @click="fail(1)" throttleTime="2000" :loading="loading" :disabled="isClick" class="button-primary">通过</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		diseaseMaterialList,
		repairAudit, // 审核
		repairDetail, // 维修详情
	} from '@/api/engineeringMaintenance/maintenanceTask.js'
	import {
		getPicture
	} from '@/api/doc.js' //获取图片
	import mixins from "@/utils/mixins.js"
	import viewVideo from "@/subpackage-enginner/pages/engineeringMaintenance/common/viewVideo.vue"
	export default {
		name: 'serviceInformation',
		mixins: [mixins],
		components:{
			viewVideo
		},
		data() {
			return {
				loading:false,
				form: {},
				formData: {

				},
				science: [],
				list: [],
				dateList: {},
				fileListImg: [],
				constructionDate: "",
				// productionDateShow: false,
				repairDate: '',
				titleObj: {
					navTitle: '',
					siteTitle: '',
					subTitle: '',
				},
				beforeImgsList:[],
				middleImgsList:[],
				afterImgsList:[],
				sheetImgsList:[],
				diseaseMaterials:[],//工程量数组
				ownerCode:undefined,
				isClick:false,
				videoList:[],
				playVideoSrc:"",
				diseaseVideoList:[]	//病害视频
			}
		},
		async onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('getLists', async (data) => {
				console.log(data, '维修审核详情');
				this.dateList = data.data[data.e]
				this.titleObj = data.titleObj
				console.log(this.dateList, '获取维修对象');
				if(this.dateList.docId) {
					this.dateList.imgs = await this.getItemImage(this.dateList.docId)
				}
				if(this.dateList.videoDocId) {
					this.diseaseVideoList = await this.getVideoList(this.dateList.videoDocId)
				}
				if(this.dateList.preConstructionDocId) {
					this.beforeImgsList = await this.getItemImage(this.dateList.preConstructionDocId)
				}
				//维修中图片
				if(this.dateList.middleConstructionDocId) {
					this.middleImgsList = await this.getItemImage(this.dateList.middleConstructionDocId)
				}
				//维修视频
				if(this.dateList.maintainConstructionDocId) {
					this.videoList = await this.getVideoList(this.dateList.maintainConstructionDocId)
				}
				if(this.dateList.afterConstructionDocId) {
					this.afterImgsList = await this.getItemImage(this.dateList.afterConstructionDocId)
					console.log(this.afterImgsList, '--');
				}
				await this.describe()
				await this.reDetails()
			})
		},
		mounted() {
			this.ownerCode = uni.getStorageSync('ownerCode')
		},
		methods: {
			/** 预览文件 */
			handleClickPreview(item) {
				this.playVideoSrc = item.url;
			},
			lookVideo(url) {
				this.playVideoSrc = url;
			},
			closeVideo() {
				this.playVideoSrc = ''
			},
			// 物料描述
			describe() {
				let param = {
					currPage: 1,
					pageSize: 10000,
					params: {
						projectId: uni.getStorageSync('isOwner')
					}
				}
				diseaseMaterialList(param).then(res => {
					if (res.status === 1 && res.success) {
						this.list = res.result.list
					}
				})
			},
			// 维修审核详情
			reDetails() {
				let params = {
					// keyword:this.searchText,
					id: this.dateList.id
				}
				repairDetail(params).then(async res => {
					if (res.status === 1 && res.success) {
						console.log(res.result, '维修详情');
						this.repId = res.result.id
						this.formData = res.result
						this.diseaseMaterials = res.result.diseaseMaterials
						if(res.result.voucherDocId) {
							this.getItemImage(res.result.voucherDocId).then(res => {
								this.sheetImgsList = res
							})
						}
						console.log(this.information, 'this.information');
						if (this.formData.repairDate) {
							let repairDate = this.getDate(this.formData.repairDate)
							this.$set(this.formData, 'repairDate', repairDate)
						}
						const {
							code,
							makt,
							measureUnit
						} = res.result.diseaseMaterials
						this.formData = {
							...this.formData,
							code,
							makt,
							measureUnit
						}
						if (this.formData.docId) {
							this.fileListImg = await this.getItemImage(this.formData.docId)
							// this.fileListImg = this.fileListImg.map(it => ({ url: it }))
						}
					}
				})
			},
			/**
			 * 获取到docId中的图片并且拼成网络路径格式
			 * @param {Number} docId
			 * @return {String} //拼好的网络路径格式
			 */
			async getItemImage(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						let imgResult = res.result.filter(item => item.contentType.substring(0, item
							.contentType.indexOf("/")) === 'image')
						resolve(imgResult.map(it => ({
							url: this.$config.IMG_FILE_URL + it.fileName,
							id: it.id
						})));
					}).catch(err => reject(err))
				})
			},
			async getVideoList(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						let videoResult = res.result.filter(item => item.contentType.substring(0, item
							.contentType.indexOf("/")) === 'video')
						resolve(videoResult.map(it => ({
							url: this.$config.VIDEO_URL + it.fileName,
							id: it.id
						})));
					}).catch(err => reject(err))
				})
			},
			/**
			 * @param {Number} type 1审核通过 || 0不通过
			 **/
			fail(type) {
				let data = {
					ids: [this.dateList.id],
					diseaseOrderId: this.formData.diseaseOrderId
				}
				if (type === 0) {
					uni.navigateTo({
						url: `/subpackage-enginner/pages/engineeringMaintenance/repair_check/components/desOpinions?data=${JSON.stringify(data)}`,
					})
				} else {
					this.loading = true
					this.isClick = true
					let params = {
						// keyword:this.searchText,
						ids: [this.dateList.id],
						auditStatus: type === 0 ? false : true,
						diseaseOrderId: this.formData.diseaseOrderId
					}
					
					repairAudit(params).then(res => {
						this.loading = false
						if (res.status === 1 && res.success) {
							uni.showToast({
								title: '审核通过',
								icon: 'none'
							})
							uni.navigateBack();
						}
					}).finally(()=> {
						this.loading = true
						this.isClick = true
					})
				}

			},
			//截止日期
			getTime(str) {
				if (!str) return ''
				return this.getDate(str)
			}


		}
	}
</script>

<style lang="scss" scoped>
	.service-information {
		/* #ifdef MP-WEIXIN */
			padding-top: 180rpx;
		/* #endif */
		.submit-sh {
			padding-right: 40rpx;
			margin-left: 50rpx;
			font-size: 38rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #586981;

			.after-oper {
				height: 100%;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					height: 100%;
					width: 2rpx;
					border-left: 2rpx dashed rgba(134, 181, 251, 1);
					// border-image: repeating-linear-gradient(90deg, rgba(134, 181, 251, 1), rgba(134, 181, 251, 0)) 1 1;
					top: 80rpx;
					left: 20rpx;
				}
			}

			.submit {
				display: flex;
				justify-content: flex-start;
				padding-top: 20rpx;

				.z-s {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #d2d9e3;
					position: relative;
					margin-top: 20rpx;
					margin-right: 24rpx;
					background: rgba(47, 128, 237, 0.2);
					;

					&::after {
						content: '';
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						background: #2F80ED;
						border-radius: 50%;
						left: 8rpx;
						top: 8rpx;
					}



				}

				.s-tm {
					margin-top: 20rpx;
					font-size: 28rpx;
				}

				.s-tm-r {
					clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
					width: 110rpx;
					font-size: 28rpx;
					background: linear-gradient(90deg, #FF2B2B 0%, #FF603D 100%);
					padding: 0 10rpx;
					text-align: center;
					color: #ffffff;
					height: 34rpx;
					line-height: 34rpx;
					margin-top: 26rpx;
					border-radius: 20%;
					margin-right: 88rpx;
				}

				.z-u {
					// width: 30%;
					margin-right: 230rpx;
					margin-top: 20rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #2F80ED;
				}

				.z-u1 {
					padding-right: 10rpx;
					margin-top: 20rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #2F80ED;
				}


			}

			.s-time {
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;

				.s-text {}

				.z-b {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #6A819E;
					padding-left: 32rpx;
				}
			}

			.s-time1 {
				margin-left: 60rpx;

				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #586981;

				.s-text1 {}

				.s-tm1 {
					padding-top: 10rpx;
				}
			}
		}

		.technological {
			display: flex;
			justify-content: space-between;
			margin-left: 30rpx;
			padding: 36rpx 0 20rpx 0;

			.z-technological {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #22204E;
			}

			.z-icon {}
		}

		.science {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #586981;
			padding-right: 34rpx;

			.science-top {
				margin-left: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #d1d5db;
				padding: 36rpx 0 20rpx 0;

				.z-left {
					font-size: 38rpx;

				}

				.z-right {}
			}

			.science-bottom {
				padding-right: 36rpx;

				.s-left {}

				.s-right {}
			}

			.science-bottom-gg {
				display: flex;
				justify-content: space-between;
				margin-left: 68rpx;
				padding-top: 28rpx;
				padding-bottom: 28rpx;
				border-bottom: 2rpx dashed #d1d5db;
			}
			.science-bottom-gg:last-child {
				border-bottom: none;
			}
		}

		.headLine {

			background: #F5F7FA;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #22204E;
			padding-left: 30rpx;
			padding-top: 48rpx;
			padding-bottom: 20rpx;
		}

		.all-text {
			padding-top: 40rpx;
			padding-right: 40rpx;
			margin-left: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #6A819E;
			line-height: 32rpx;

			.service-text {
				display: flex;
				// height: 60rpx;
				padding: 30rpx 0;

				align-items: center;

				.text-ring {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #445469;
					max-width: 440rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 38rpx;
					margin-right: 20rpx;
				}

				.leval {
					// width: 62rpx;
					color: #fff;
					padding: 0 20rpx;
					height: 34rpx;
					text-align: center;
					background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
					clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
				}

				.leval.ye {
					background: linear-gradient(90deg, #FF882B 0%, #FF9F3D 100%) !important;
				}

				.leval.re {
					background: linear-gradient(90deg, #FF2B2B 0%, #FF603D 100%) !important;
				}

				.leval.bl {
					background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%) !important;
				}
			}
		}

		.plain {
			margin-bottom: 20rpx;
		}

		.explain {
			display: flex;

			.e-text {
				margin-bottom: 20rpx;

			}

			.e-time {
				margin-bottom: 20rpx;
				color: #6A819E;
			}

			.red {
				color: #FF6A6A;
			}
		}

		.job {
			margin-bottom: 20rpx;
			max-width: 600rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.content-colot {
			height: 40rpx;
			background: #F5F7FA;
		}

		.form-data {
			width: 630rpx;
			margin-left: 64rpx;

			.value-nav {
				position: relative;

				.day {
					position: absolute;
					top: 2rpx;
					right: -50rpx;
				}
			}
		}

		.photo-list {
			padding-right: 40rpx;
			margin-left: 40rpx;

			.photo-top {

				display: flex;
				height: 100rpx;
				justify-content: space-between;

				.photo-text {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #445469;
					line-height: 100rpx;
				}
			}

			.top_img {
				// display: flex;
				margin-left: 40rpx;
				// padding-bottom: 40rpx;

				&>view {
					width: 200rpx;
					margin-right: auto;
				}
			}
		}

		.d-remarks {
			width: 660rpx;
			margin-left: 40rpx;

			.d-text {
				height: 100rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				line-height: 100rpx;
				border-bottom: 2rpx solid #d1d5db;
				;
			}

			.text-b {
				padding: 24rpx 24rpx 20rpx 24rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #586981;
				word-wrap: break-word;
				word-break: break-all;
			}
		}

		.btn_box {
			height: 100rpx;

			.btn_group {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 100rpx;
				position: fixed;
				bottom: 0;
				width: 100%;
				// margin-left: 40rpx;
			}
		}

		/deep/.uni-input-input {
			background: #ffffff;
		}

	}
	.dis-localtion {
		background-color: white;
		margin: 20rpx 0;
	
		.lo-text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			display: inline-block;
			font-size: 32rpx;
			margin-left: 30rpx;
			// padding-top: 16rpx;
			height: 100rpx;
			width: 90%;
			line-height: 100rpx;
			border-bottom: 1rpx solid #e6e9f0;
		}
	
		.lo-menu {
			padding: 6rpx 54rpx 6rpx 64rpx;
	
			.menu-fl {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				border-bottom: 2rpx solid #e6e9f0;
				font-weight: 500;
				color: #586981;
				padding: 35rpx 0;
				&>text:last-child {
					max-width: 70%;
					align-items: center;
				}
			}
			.menu-fl:last-child {
				border-bottom: none;
			}
	
	
			.menu-f {
				padding: 35rpx 0;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #586981;
	
			}
		}
	}
	// .video-class /deep/ .u-upload__wrap {
	// 		flex-direction: column;
	// }
	.no-ml {
		margin-left: 0px !important;
		/deep/ .video-class {
			margin-left: 0px !important;
		}
		/deep/ .item-box {
			// margin-right: 34rpx !important;
		}
		/deep/ .photo-list .u-upload {
			/* #ifdef MP-WEIXIN */
				margin-left: 0px !important;
			/* #endif */
		}
	}
	.no-ml.wrap {
		/deep/ .video-class .u-upload__wrap {
			flex-direction: row;
		}
	}
	/deep/ .u-album__row {
		flex-wrap: nowrap;
	}
</style>
